<template>
  <div class="mui-content ">
    <!--进入页面加载资源动画-->
    <div v-if="showme ">
      <div id="Loading">
        <div class="loader-inner ball-beat">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
    <!--<heade background='' title='资源详情' v-on:goBack="goBack($event)"></heade>-->
    <div v-if="!showme">
      <div class="movie" v-if="article">
        <video :src=detailData.File.LUrl controls="controls" :poster="detailData.File.SUrl"></video>
      </div>
      <div class="infoTitle" v-if="!article">
        <img :src=detailData.File.SUrl alt="">
        <div class="name">
          <div class="user">{{detailData.File.FileName}}</div>
          <div class="time">作者：{{detailData.Author}}</div>
        </div>
        <div class="right">
          <a class=" mui-text-right" @click="openWindow(detailData.File.LUrl)"  >查看</a>
          <a  class=" mui-text-right" @click="downLoad2(detailData.File.FileSN)" >下载</a></div>
      </div>
      <div class="movieFoot mui-text-center">
        <div class="movieDetail icon-left"><span class="icon icon1"></span>{{detailData.ClickNumber}}</div>
        <div class="movieDetail icon-left"><span class="icon icon2"></span>{{detailData.CollectNumber}}</div>
        <div class="movieDetail icon-left"><span class="icon icon3"></span>{{detailData.EvaluatNumber}}</div>
        <div class="movieDetail icon-right">大小：{{detailData.File.FileSize}}</div>
        <div class="movieDetail icon-right" v-if="detailData.IsCollect" @click="myCollect">取消收藏：<span class="icon icon4"></span></div>
        <div class="movieDetail icon-right" v-if="!detailData.IsCollect" @click="myCollect">收藏：<span class="icon icon5"></span></div>
      </div>
      <div class='nav'>
        <div  class='nav-item' :class="clas1" @click="lesson(0)">课程信息
          <i class='line'></i>
        </div>
        <div  class='nav-item' :class="clas2" @click="lesson(1)" v-show="article">附件信息
          <i class='line line-med'></i>
        </div>
        <div  class='nav-item' :class="clas3" @click="lesson(2)" >评价({{detailData.EvaluatNumber}})
          <i class='line'></i>
        </div>
      </div>
      <div class="footer">
        <Lesson v-show="isShow1==1" :detailData=detailData></Lesson>
        <Append
          v-show="isShow1==2"
          v-on:downLoad="downLoad($event)"
          v-on:chek="chek($event)"
          :detailData=detailData
        ></Append>
        <Rating v-show="isShow1==3"  :ratData=ratData  :addclas=clas :change=change></Rating>
      </div>
    </div>

    <Prompt
    title="错误"
    :msg="mistakeMsg"
    confirm="确定"
    v-on:confirm1="confirm1($event)"
    v-if="mistake"
    >
    </Prompt>
    <transition name="fade2">
      <Confirm
        :titleConfirm=titleConfirm
        :msgConfirm=msgConfirm
        v-on:sure="sure($event)"
        v-on:giveUp="giveUp($event)"
        v-if="isCofirm"
      >
      </Confirm>
    </transition>
    <Regist v-if="regist" v-on:registFn="registFn($event)" :isResource=isResource> </Regist>
  </div>

</template>
<script>
  import heade from '@components/common/head2.vue'
  import Append from '@components/ResourceDetail/Append.vue'
  import Lesson from '@components/ResourceDetail/Lesson.vue'
  import  Rating from '@components/ResourceDetail/Rating.vue'
  import  Prompt from '@components/common/Prompt.vue'
  import  Confirm from '@components/common/Confirm.vue'
  import  Regist from '@components/Regist'
  export default {
    components:{
      heade,
      Append,
      Lesson,
      Rating,
      Prompt,
      Confirm,
      Regist
    },
    data(){
      return{
        mistakeMsg:'',
        showme:true,
        collectIndex:[],
        UserId:'',
        isResource:true,
        regist:false,
        titleConfirm:'',
        msgConfirm:'',
        isCofirm:false,
        mistake:false,
        isShow1:1,
        clas1:'active',
        clas2:'',
        clas3:'',
        // remind:true,
        SN:'',
        detailData:{},
        article:true,
        ratData:[],
        arr:"888",
        clas:"",
        snData:{},
        change:'',
        // ResourceStoreAttas:{}
      }
    },
    props:{
      commentNum:{
        type:  Number,
        default:0
      }
    },
    created(){
      this.change='我要评价';
      let me=this;
      // let data=this.$store.getters.getSN;
      let Data= sessionStorage.getItem("DetailSN");
      console.log(Data);
      me.snData= JSON.parse(Data);
      console.log(888);
      console.log(me.snData);
      // this.SN=data;
      this.$Global.zcServer.Post({
        IsNeedLogin: 'false',
        Paras:{
          UserId:me.$Global.UserId ,
          Name:'Vue_CourseResource',
          action:"Ext_ResourceStoreInfo",
          Data:{
            SN:me.snData.SN
          }
        },
        Callback:me.cb_ResourceDetail,
        Scope:me,
      });

      me.$Global.zcServer.Post({
        IsNeedLogin: 'false',
        Paras:{
          UserId:me.$Global.UserId ,
          Name:'Vue_CourseResource',
          action:"Ext_ResourceEvaluatList",
          Data:{
            SN:me.snData.SN,
            Page:1
          }
        },
        Callback:me.cb_ResourceRat,
        Scope:me,
      });
    },

    methods:{
      confirm1(){
        // this.$router.push('/Login')
        this.mistake=false
      },
      openWindow(href){
        window.open(href)
      },
      downLoad(){
        // alert('下载')
      },
      downLoad2(item){
        let Server = "http://" + window.location.host + "/";
        window.open(Server+'PageService/doOSSDownload.ashx?pSN=' + item);
      },
      goBack(){
        this.$router.push('/Index')
      },
      lesson(index){
        sessionStorage.setItem("clas11", index+1);
        if(index===0){
          this.clas1="active";
          this.clas2="";
          this.clas3="";
          this.isShow1=1;
        }else if(index===1){
          this.clas1="";
          this.clas2="active";
          this.clas3="";
          this.isShow1=2;
        }else {
          this.clas1="";
          this.clas2="";
          this.clas3="active";
          this.isShow1=3;

        }
      },
      myCollect(){
        let me=this;
        me.$Global.zcServer.Post({
          IsNeedLogin: 'true',
          Paras:{
            UserId:me.$Global.UserId ,
            Name:'Vue_CourseResource',
            action:"Ext_ResourceStoreIsCollect",
            Data:{
              IsCollect: !me.detailData.IsCollect,
              SN: me.snData.SN,
            }
          },
          Callback:me.cb_collect,
          Scope:me,
        });
      },
      registFn(regist2){
        this.regist=!regist2;
        this.isResource=true;
        console.log('regist2',regist2)

      },
      /*回调函数*/
      cb_ResourceDetail(resJson,scope){
        if(resJson.msg=="网络问题，无法连接到服务器!"){
          this.mistake=true
        } else {
          this.mistake=false
        }
        console.log("所有数据")
        console.log(resJson)
        if(resJson.data.File.FileType!='视频文件'){
          this.article=false;
          this.clas='article1'
        }
        this.detailData=resJson.data;
        this.$nextTick(()=>{
          this.showme=false
          // this.$nextTick(()=>{
          if(sessionStorage.getItem("clas11")){
            this.isShow1=sessionStorage.getItem("clas11")
            if(this.isShow1==1||this.isShow1==null||this.isShow1==''){
              this.clas1="active"
            }
            if(this.isShow1==2){
              this.clas2="active"
              if(!this.article){
                this.clas1="active";
                this.clas2=""
                this.isShow1=1;
                sessionStorage.setItem("clas11", this.isShow1);
              }else {
                this.clas1="";
                this.clas2="active"
                this.isShow1=2;
                sessionStorage.setItem("clas11", this.isShow1);
              }
            }
            if(this.isShow1==3){
              this.clas3="active"
              this.clas1="";
            }
          }

          // })
        });

      },
      cb_ResourceRat(resJson,scope){
        // let ratData
        console.log(77777)
        console.log(resJson)
        this.ratData=resJson.data.Data;
        this.$store.commit('setratData',this.ratData)
        if(this.ratData==0){
          let data={};
          data.CSN='';
          data.id='';
          data.SN='';
          sessionStorage.setItem("ratSN", JSON.stringify(data));
          this.change='我要评价'
        }else {
          for(let i=0;i<this.ratData.length;i++){
            if(this.ratData[i].IsMy){
              let data={};
              data.CSN=this.ratData[i].ResourceStoreSN;
              data.id=this.ratData[i].Id;
              data.SN=this.ratData[i].SN;
              sessionStorage.setItem("ratSN", JSON.stringify(data));
              this.change='修改评论';
              return;
            }else{
              this.change='我要评价';
              let data={};
              data.CSN='';
              data.id='';
              data.SN='';
              sessionStorage.setItem("ratSN", JSON.stringify(data));
            }
          }
        }
      },
      cb_collect(resJson,scope){

        console.log('收藏返回');
        console.log(resJson)
        if(resJson.success==true){
          this.detailData.IsCollect= !this.detailData.IsCollect;
        }else {

          if(resJson.msg.indexOf("PleaseRegistry")>=0){
            this.isCofirm=true;
            this.titleConfirm='提醒'
            this.msgConfirm='请注册并登陆后再收藏！'
          }else {

            this.mistake=true
            this.mistakeMsg=resJson.msg
          }
        }
      },
      sure(){
        let me=this;
        me.isCofirm=false;
        me.regist=true;
        // me.$router.push('/Regist')

      },
      giveUp(){
        this.isCofirm=false
      },
    },
    computed:{
      getSN(){
        SN=this.$store.getters.getSN;
        return SN
      },
    },
    mounted(){

    }

  }
</script>
<style scoped>
  /*进入页面动画*/
  #Loading {
    top:50%;
    left:50%;
    position: absolute;
    -webkit-transform: translateY(-50%)  translateX(-50%);
    transform: translateY(-50%)  translateX(-50%);
    z-index:100;
  }
  @-webkit-keyframes ball-beat {
    50% {
      opacity: 0.2;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
    }

    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1); }
  }

  @keyframes ball-beat {
    50% {
      opacity: 0.2;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
    }

    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1); }
  }

  .ball-beat > div {
    background-color: #279fcf;
    width: 15px;
    height: 15px;
    border-radius: 100% !important;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
    -webkit-animation: ball-beat 0.7s 0s infinite linear;
    animation: ball-beat 0.7s 0s infinite linear; }
  .ball-beat > div:nth-child(2n-1) {
    -webkit-animation-delay: 0.35s !important;
    animation-delay: 0.35s !important;
  }

  .mui-content  .infoTitle{
    /*margin-top: 10px;*/
    width: 100%;
    background-color: white;
    padding: 3% 3%;
    font-size: 14px;
    display: flex;
  }
  .mui-content  .infoTitle *{
    margin-left: 10px;
  }
  .mui-content  img{
    width: 45px;
    height: 45px;
    background-size: 35px 35px;
    /*border-radius: 50%;*/
  }
  .mui-content  .infoTitle .name{
    width: 55%;
    color:#717171;
  }
  .mui-content  .infoTitle .name .user{
    font-size: 1rem;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }




  .mui-content  .infoTitle .right{
    font-size: 14px;
    display: flex;

  }
  .mui-content  .infoTitle .right .mui-text-right{
    padding-top: 3px;
    color:rgba(93, 194, 240, 1);
  }
  /*视频*/
.mui-content .movie{
  width: 100%;
  height: 220px;
  background-color: #8f8f94;
}
.mui-content .movie video{
  height: 100%;
  width: 100%;
}
  .mui-content .movieFoot {
    width: 100%;
    height: 45px;
    line-height: 45px;
    display: flex;
    border-bottom: 1px solid gainsboro;
    background-color: white;
    color: #aeaeae;
  }
.mui-content .movieFoot .icon-left{
  width: 16%;
  font-size: 0.8rem;
}
.mui-content .movieFoot .icon-right{
  width: 26%;
  font-size: 0.8rem;
  position: relative;
}

.mui-content .movieFoot .icon1{
  background: url("../../assets/img/dianji.png");
}
.mui-content .movieFoot .icon2{
  background: url("../../assets/img/sc.png");
}
.mui-content .movieFoot .icon3{
  background: url("../../assets/img/pj.png");
}
.mui-content .movieFoot .icon4{
  background: url("../../assets/img/shouCang2.png");
}
.mui-content .movieFoot .icon5{
  background: url("../../assets/img/shouCang.png");
}
.mui-content .movieFoot .icon{

  display: inline-block;
  width: 18px;
  height: 13px;
  background-size: 16px 13px ;
  background-repeat: no-repeat;
}
.mui-content .movieFoot .icon4{

  display: inline-block;
  width: 18px;
  height: 16px;
  background-size: 18px 16px ;
  background-repeat: no-repeat;
  position: absolute;
  right: 5px;
  top: 13px;
}
.mui-content .movieFoot .icon5{

  display: inline-block;
  width: 18px;
  height: 16px;
  background-size: 18px 16px ;
  background-repeat: no-repeat;
  position: absolute;
  right: 5px;
  top: 13px;
}
.nav{
margin-top: 5px;
  position: relative;
  display:flex;
  /*widows:100%;*/
  height:50px;
  line-height: 50px;
  border-bottom:1px solid #e4e4e4;
  background-color: white;
}
.nav-item{
  flex:1;
  text-align: center;
  font-size: 14px;
  text-decoration: none;
  color:#666666;
}
/* 选中的样式 */
.nav .active{
  color:rgb(70,180,250);
  border-bottom:1px solid rgb(70,180,250);
}
  .footer{
    margin-top: 5px;
  }
  /*彈出框*/
  .fade-enter-active, .fade-leave-active {
    transition: opacity 1.5s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0
  }
  .fade-enter-to, .fade-leave {
    opacity: 1;
  }

</style>
